<template>
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      class="one"
      :style="{width:pagesStore.sizeNum + 'px',height:pagesStore.sizeNum + 'px'}"
    >
      <g clip-path="url(#clip-path-104_4431)">
        <path
          d="M12.5498 7.66363C12.335 5.60729 10.4658 4 8.19048 4C5.94304 4 4.09336 5.56868 3.84118 7.5884C1.66457 7.91218 0 9.6565 0 11.7647C0 14.1037 2.04677 16 4.57144 16L6.899 16L6.899 12.1176L3.72547 12.1176L8.00001 7.88235L12.2745 12.1176L9.18471 12.1176L9.18471 16L11.8095 16L11.8095 15.9817C14.1555 15.8025 16 13.9846 16 11.7647C16 9.78459 14.5315 8.12759 12.5498 7.66363Z"
          :fill="!theme.includes('2e3c56')? '#224477' : '#fff'"
        ></path>
        <circle
          cx="12.9990234375"
          cy="2.99951171875"
          r="3"
          stroke="rgba(226, 233, 251, 1)"
          stroke-width="1"
          fill="#FF8D1A"
        ></circle>
      </g>
      <defs>
        <clipPath id="clip-path-104_4431">
          <path d="M0 16L16 16L16 0L0 0L0 16Z" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";
import usePagesStore from '@/store/modules/pages'
const pagesStore = usePagesStore()
const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
</script>

<style scoped>
.one{
  display: inline-block;
  vertical-align: middle;
}</style>
